<template>
	<div ref="Large" class="main">
		 <el-button type="primary" size="small"  @click="LargeScreen">全屏</el-button>
		 <countTo class="countStyle"   :start-val="0" :end-val="258557" :duration="3000"/>
        <div class="box1">	
		
		
		<div ref="barEchartsBox" class="echarts_box">
			
		</div>
		<div style="color: white;">
		 <!--  <span>{{nowWeek}}</span> -->
		   <span>{{nowDate}}</span>
		   <span style="margin-left: 20px;">{{nowTime}}</span>
		 </div>
		
		</div>
	
		<div ref="cakeBox" class="cakeBoxs"></div>
		<div ref="mapBox" class="cakeBoxs"></div>
		<div ref="wordBox" class="cakeBoxs"></div>
		<div class="canvasBgBox">
			<CanvasBg></CanvasBg>
		</div>
	</div>
	
</template>

<script>
	
	import * as echarts from 'echarts';
	import  "echarts/map/js/china.js"
	require('echarts-wordcloud')
	// 引入全屏
	import screenfull from 'screenfull'
	// 引入数字缓动
	import countTo from 'vue-count-to'
	// 引入动态背景图
	import CanvasBg from "@/views/dashboard/canvasBg.vue"
	export default {
		components:{countTo,CanvasBg},
		data() {
			return {
    timer: null,
        nowWeek: "",
        nowDate: "",
        nowTime: "",
			}
		},
		mounted() {
			  var _this = this;
			    this.timer = setInterval(() => {
			      this.setNowTimes();
			    }, 1000);
			this.initTest()
			this.initCake()
			this.initMap()
			 this.initWord()
		},
		methods: {
			// 全屏
			LargeScreen(){
				if (screenfull.isEnabled) {
						screenfull.toggle(this.$refs.Large);
					}
			},
			//词云
			initWord(){
				var myEcharts = echarts.init(this.$refs.wordBox)
			  var option = {
			
			                tooltip: {
			                    show: true
			                },
			                series: [{
			                    type: 'wordCloud',
			                    gridSize: 6,
			                    shape: 'diamond',
			                    sizeRange: [30, 60],
			                    width: 800,
			                    height: 500,
			                    textStyle: {
			                        normal: {
			                            color: function() {
			                                return 'rgb(' + [
			                                    Math.round(Math.random() * 160),
			                                    Math.round(Math.random() * 160),
			                                    Math.round(Math.random() * 160)
			                                ].join(',') + ')'
			                            }
			                        },
			                        emphasis: {
			                            shadowBlur: 10,
			                            shadowColor: '#333'
			                        }
			                    },
			                    data: [{
			                        name: ' 特斯拉Model S',
			                        value: 30
			                    },
			                    {
			                        name: '天生要强',
			                        value: 24
			                    },
			                    {
			                        name: ' 华为p20',
			                        value: 21
			                    },
			                    {
			                        name: '杜兰特',
			                        value: 19
			                    },
			                    {
			                        name: '三只松鼠',
			                        value: 18
			                    },
			                    {
			                        name: 'Mac Pro',
			                        value: 18
			                    },
			                    {
			                        name: 'Iphone12 Pro',
			                        value: 17
			                    },
			                    {
			                        name: '玛莎拉蒂',
			                        value: 12
			                    },
			                    {
			                        name: '小米手机',
			                        value: 12
			                    },
			                    {
			                        name: '保时捷',
			                        value: 11
			                    }
			
			                    ]
			                }]
			
			            }
			          
				myEcharts.setOption(option) 
			},
			// 地图
			initMap(){
				var outname = ["南海诸岛", '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门'];
				var outvalue = [0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225];
				var outdata = [];
				
				var max = 6000,
				    min = 10;
				var maxSize4Pin = 100,
				    minSize4Pin = 20;
				
				for (var i = 0; i < outname.length; i++) {
				    outdata.push({
				        name: outname[i],
				        value: outvalue[i]
				    })
				}
				
				var geoCoordMap = {};
				/*获取地图数据*/
				var mapFeatures = echarts.getMap('china').geoJson.features;
				//  console.log(mapFeatures)
				mapFeatures.forEach(function(v) {
				    console.info(v)
				    // 地区名称
				    var name = v.properties.name;
				    // 地区经纬度
				    geoCoordMap[name] = v.properties.cp;
				
				});
				var convertData = function(outdata) {
				    var res = [];
				    for (var i = 0; i < outdata.length; i++) {
				        var geoCoord = geoCoordMap[outdata[i].name];
				        if (geoCoord) {
				            res.push({
				                name: outdata[i].name,
				                value: geoCoord.concat(outdata[i].value),
				            });
				        }
				    }
				    return res;
				};
				
			var	option = {
				    backgroundColor: '#0F1C3C',
				    tooltip: {
				        show: true,
				        formatter: function(params) {
				            if (params.value.length > 1) {
				                return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '人&nbsp;&nbsp;';
				            } else {
				                return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '人&nbsp;&nbsp;';
				            }
				        },
				
				    },
				
				    geo: {
				        map: 'china',
				        show: true,
				        roam: false,
				        label: {
				            emphasis: {
				                show: false
				            }
				        },
				        layoutSize: "100%",
				        itemStyle: {
				            normal: {
				                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                    offset: 0,
				                    color: '#00F6FF'
				                }, {
				                    offset: 1,
				                    color: '#53D9FF'
				                }], false),
				                borderWidth: 3,
				                shadowColor: 'rgba(10,76,139,1)',
				                shadowOffsetY: 0,
				                shadowBlur: 60
				            }
				        }
				    },
				    series: [{
				        type: 'map',
				        map: 'china',
				        aspectScale: 0.75,
				        //zoom:1.1,
				        label: {
				            normal: {
				                show: false,
				            },
				            emphasis: {
				                show: false,
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: {
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: '#073684' // 0% 处的颜色
				                    }, {
				                        offset: 1,
				                        color: '#061E3D' // 100% 处的颜色
				                    }],
				                },
				                borderColor: '#215495',
				                borderWidth: 1,
				            },
				            emphasis: {
				                areaColor: {
				
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: '#073684' // 0% 处的颜色
				                    }, {
				                        offset: 1,
				                        color: '#061E3D' // 100% 处的颜色
				                    }],
				                },
				            }
				        },
				        data: outdata,
				    }, {
				        type: 'effectScatter',
				        coordinateSystem: 'geo',
				        rippleEffect: {
				            brushType: 'stroke'
				        },
				        showEffectOn: 'render',
				        itemStyle: {
				            normal: {
				                color: {
				                    type: 'radial',
				                    x: 0.5,
				                    y: 0.5,
				                    r: 0.5,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(5,80,151,0.2)'
				                    }, {
				                        offset: 0.8,
				                        color: 'rgba(5,80,151,0.8)'
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0,108,255,0.7)'
				                    }],
				                    global: false // 缺省为 false
				                },
				            }
				
				        },
				        label: {
				            normal: {
				                show: true,
				                color: '#fff',
				                fontWeight: 'bold',
				                position: 'inside',
				                formatter: function(para) {
				                    return '{cnNum|' + para.data.value[2] + '}'
				                },
				                rich: {
				                    cnNum: {
				                        fontSize: 13,
				                        color: '#D4EEFF',
				                    }
				                }
				            },
				        },
				        symbol: 'circle',
				        symbolSize: function(val) {
				            if (val[2] === 0) {
				                return 0;
				            }
				            var a = (maxSize4Pin - minSize4Pin) / (max - min);
				            var b = maxSize4Pin - a * max;
				            return a * val[2] + b * 1.2;
				        },
				        data: convertData(outdata),
				        zlevel: 1,
				    }]
				};
				var myEcharts = echarts.init(this.$refs.mapBox)
			myEcharts.setOption(option) 
							
			},
			// 格式化时间
			  setNowTimes() {
			      let myDate = new Date();
			      // console.log(myDate)
			      let wk = myDate.getDay();
			      let yy = String(myDate.getFullYear());
			      let mm = myDate.getMonth() + 1;
			      let dd = String(
			        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
			      );
			      let hou = String(
			        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
			      );
			      let min = String(
			        myDate.getMinutes() < 10
			          ? "0" + myDate.getMinutes()
			          : myDate.getMinutes()
			      );
			      let sec = String(
			        myDate.getSeconds() < 10
			          ? "0" + myDate.getSeconds()
			          : myDate.getSeconds()
			      );
			      // let weeks = [
			      //   "星期日",
			      //   "星期一",
			      //   "星期二",
			      //   "星期三",
			      //   "星期四",
			      //   "星期五",
			      //   "星期六",
			      // ];
			      // let week = weeks[wk];
			      this.nowDate = yy + "-" + mm + "-" + dd 
			      this.nowTime = hou + ":" + min + ":" + sec;
			      // this.nowWeek = week;
			    },
			
			// 饼状图
			initCake() {
	
				var option = {
					backgroundColor: '#2c343c',

					title: {
						text: 'Customized Pie',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#ccc'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},

					visualMap: {
						show: false,
						min: 80,
						max: 600,
						inRange: {
							colorLightness: [0, 1]
						}
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 274,
								name: '联盟广告'
							},
							{
								value: 235,
								name: '视频广告'
							},
							{
								value: 400,
								name: '搜索引擎'
							}
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							color: 'rgba(255, 255, 255, 0.3)'
						},
						labelLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.3)'
							},
							smooth: 0.2,
							length: 10,
							length2: 20
						},
						itemStyle: {
							color: '#c23531',
							shadowBlur: 200,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						},

						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				};
			// 这里要init一个echarts实例
						var myEcharts = echarts.init(this.$refs.cakeBox)
						// 然后把option赋值给实例
						myEcharts.setOption(option)
			},

			// 柱状图
			initTest() {
				var xAxisData = []
				var data1 = []
				var data2 = []
				// 模拟80条数据
				for (var i = 0; i < 80; i++) {
					xAxisData.push('date' + i)
					data1.push(Math.ceil(Math.random() * 10))
					data2.push(Math.ceil(Math.random() * 10))
				}

				var option = {
					// 标题的参数
					title: {
						text: '订单退单柱状图',
						// 标题字体样式
						textStyle: {
							color: '#9AA8D4',
							fontSize: 22,
							fontWeight: 'normal'
						}
					},
					// 两个按钮的样式
					legend: {
						// 对应 series里的 name
						data: ['订单', '退单'],
						// 距离底部
						bottom: 10,
						// 字体样式
						textStyle: {
							color: '#A8AAB3', // 坐标值得具体的颜色
							fontSize: 12
						}
					},
					// toolbox: {
					//     // y: 'bottom',
					//     // 右上角工具栏
					//     feature: {
					//         magicType: {
					//             type: ['stack', 'tiled']
					//         },
					//         dataView: {},
					//         saveAsImage: {
					//             pixelRatio: 2
					//         }
					//     }
					// },
					tooltip: {},
					xAxis: {
						data: xAxisData,
						// 网格是否显示
						splitLine: {
							show: false
						},
						// x线的样式
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#A8AAB3', // 左边线的颜色
								width: '1' // 坐标线的宽度
							}
						},
						axisLabel: {
							// 坐标轴字体样式
							textStyle: {
								color: '#A8AAB3', // 坐标值得具体的颜色
								fontSize: 12
							}
						}
					},
					yAxis: {
						splitLine: {
							show: false
						},
						// y线的样式
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#A8AAB3', // 左边线的颜色
								width: '1' // 坐标线的宽度
							}
						},
						axisLabel: {
							// 坐标轴字体样式
							textStyle: {
								color: '#A8AAB3', // 坐标值得具体的颜色
								fontSize: 12
							}
						}
					},
					series: [{
						name: '订单',
						type: 'bar',
						data: data1,
						itemStyle: {
							normal: {
								// 渐变柱状图
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[{
											offset: 0,
											color: '#7D05E2'
										}, // 柱图渐变色
										{
											offset: 0.5,
											color: '#B600FF'
										}, // 柱图渐变色
										{
											offset: 1,
											color: '#BC04E2'
										} // 柱图渐变色
									]
								)
							}

						}

					}, {
						name: '退单',
						type: 'bar',
						data: data2,
						itemStyle: {
							normal: {
								// 渐变柱状图
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[{
											offset: 0,
											color: '#24CBFF'
										}, // 柱图高亮渐变色
										{
											offset: 0.5,
											color: '#24A3FF'
										}, // 柱图高亮渐变色
										{
											offset: 1,
											color: '#2492FF'
										} // 柱图高亮渐变色
									]
								)
							}

						}

					}],
					// 柱子弹出来的动画样式
					animationEasing: 'elasticOut',
					animationDelayUpdate: function(idx) {
						return idx * 5
					}
				}
				// 这里要init一个echarts实例
				var myEcharts = echarts.init(this.$refs.barEchartsBox)
				// 然后把option赋值给实例
				myEcharts.setOption(option)
			}
		},
		created() {

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main{
		background-color: #0A1631;
	}
	.canvasBgBox{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 300px;
	}
	.countStyle{
		font-size: 34px;
		color: yellow;
	}
	.box1{
		display: flex;
		.echarts_box {
			width: 500px;
			height: 100%;
		}
	}
	

	.cakeBoxs {
		width: 500px;
		height: 300px;
	}
</style>
